// 列表页逻辑代码
// 0. 获取元素
const cateBox = document.querySelector('.category > .right')
const filterBox = document.querySelector('.filter > .right')
const saleBox = document.querySelector('.sale > .right')
const sortBox = document.querySelector('.sort > .right')
const listBox = document.querySelector('.list')
const leftBtn = document.querySelector('.pagenation > .right > .left')
const rightBtn = document.querySelector('.pagenation > .right > .right')
const totalBtn = document.querySelector('.pagenation > .right > .total')
const selectBox = document.querySelector('.pagenation > .right > select')
const inp = document.querySelector('.pagenation > .right > input')
const box = document.querySelector('.box')
const searchInp = document.querySelector('.search > .right > input')
let pageNum=0;
let searchName=window.sessionStorage.getItem('listId');
if(searchName===""||searchName==="undefined")searchName="*"
let sort=""
let res=""
const listInfo = {
  current: 1,
  pagesize: 20,
  search: '',
  filter: '',
  saleType: 10,
  sortType: 'id',
  sortMethod: 'ASC',
  category: ''
}


function ccc(data){
  res=data
  console.log(res)
  console.log(res.data.list)
  let str = ''
  res.data.list.forEach(item => {
    console.log(item)
    str += `
      <li data-id="${ item.itemId }">
        <div class="show">
          <img src="${ item.img}" alt="">

          ${ item.tagString ? '<span class="sale">直降</span>' : '' }
        </div>
        <div class="info">
          <p class="title">
            ${ item.title }
          </p>
          <p class="price">
            <span class="current">
              ￥${ item.price }
            
          </p>
          <p class="add">
            <button data-id="${ item.itemId }">加入购物车</button>
          </p>
        </div>
      </li>
    `
  })
  listBox.innerHTML = str


  //   // 2-3. 渲染分页器相关信息
  leftBtn.className = listInfo.current === 1 ? 'left disable' : 'left'
  rightBtn.classList = listInfo.current === Math.ceil (res.data.total/20) ? 'right disable' : 'right'
  totalBtn.innerText = listInfo.current + ' / ' + Math.ceil (res.data.total/20)
  selectBox.value =20
  inp.value = listInfo.current
  inp.dataset.total =  Math.ceil (res.data.total/20)
  console.log(2222222222222,res.data.total,1111111)
}




// 1. 请求分类列表
// getCateList()
// async function getCateList() {
//   // 1-1. 发送请求, 请求分类列表
//   const res = await pAjax({ url: 'http://localhost:8888/goods/category', dataType: 'json' })

//   // 1-2. 利用 res.list 渲染分类部分
//   let str = '<li class="cate active">全部</li>'
//   res.list.forEach(item => {
//     str += `
//       <li class="cate">${ item }</li>
//     `
//     console.log(item)
//   })
//   cateBox.innerHTML = str
// }

/*
  分析:
    + 最终需要商品列表
    + 根据点击不同的按钮, 商品列表渲染的内容不一样
      => 例子:
      => 点击大家电, 商品列表内渲染的所有内容都是家电内容
      => 点击手机相机, 商品列表内渲染的所有内容都是手机相机相关内容
      => 点击的 6折 按钮, 那么所有内容都是 6折 的商品
    + 如何拿到不一样的数据
      => 不管你的任何修改, 请求地址不变
      => 请求方式不变
      => 渲染页面的方式不变
      => 唯一变化的就是发送请求的时候, 携带的参数
    + 把参数单独书写出来
*/

// 准备一个变量, 表示参数
// const listInfo = {
//   current: 1,
//   pagesize: 12,
//   search: '',
//   filter: '',
//   saleType: 10,
//   sortType: 'id',
//   sortMethod: 'ASC',
//   category: ''
// }

getGoodsList()
function getGoodsList(){
  const script = document.createElement('script')
  // 设置 script 标签的 src 地址
  script.src = `http://localhost:9999/searchq?q=${searchName}&page=${pageNum}&callback=ccc`
  // 插入到页面才能发送出去
  document.body.appendChild(script)
  // 删除掉
  script.remove()
}
// getGoodsList2()
function getGoodsList2(){
  const script = document.createElement('script')
  // 设置 script 标签的 src 地址
  script.src = `http://localhost:9999/searchq?q=${searchName}&sort=${sort}&callback=ccc`
  // 插入到页面才能发送出去
  document.body.appendChild(script)
  // 删除掉
  script.remove()
}
function getGoodsList3(){
  const script = document.createElement('script')
  // 设置 script 标签的 src 地址
  script.src = `http://localhost:9999/searchq?q=${searchName}&props=${listInfo.filter}&callback=ccc`
  // 插入到页面才能发送出去
  document.body.appendChild(script)
  // 删除掉
  script.remove()
}















// 2. 请求商品列表

// getGoodsList()
// async function getGoodsList() {
//   // 2-1. 发送请求
//   // const res = await pAjax({
//   //   url: 'http://localhost:8888/goods/list',
//   //   dataType: 'json',
//   //   data: listInfo
//   // })










//   await getList()
//  console.log(res,1)



      // ${ item.is_hot ? '<span class="hot">HOT</span>' : '' }

  // 2-2. 渲染页面
  // let str = ''
  // res.data.forEach(item => {
    // console.log(item)
  //   str += `
  //     <li data-id="${ item.itemId }">
  //       <div class="show">
  //         <img src="${ item.img}" alt="">

  //         ${ item.tagString ? '<span class="sale">直降</span>' : '' }
  //       </div>
  //       <div class="info">
  //         <p class="title">
  //           ${ item.title }
  //         </p>
  //         <p class="price">
  //           <span class="current">
  //             ￥${ item.price }
  //           </span>
  //           <span class="old">
  //             ￥${ item.price }
  //           </span>
  //         </p>
  //         <p class="add">
  //           <button data-id="${ item.itemId }">加入购物车</button>
  //         </p>
  //       </div>
  //     </li>
  //   `
  // })
  // listBox.innerHTML = str

//   // 2-3. 渲染分页器相关信息
//   leftBtn.className = listInfo.current === 1 ? 'left disable' : 'left'
//   rightBtn.classList = listInfo.current === res.total ? 'right disable' : 'right'
//   totalBtn.innerText = listInfo.current + ' / ' + res.total
//   selectBox.value = listInfo.pagesize
//   inp.value = listInfo.current
//   inp.dataset.total = res.total
// }

// // 3. 各种商品筛选事件
// // 事件委托, 委托给谁 最大的盒子
box.addEventListener('click', e => {
//   // 3-1. 判断点击的是分类按钮
  if (e.target.className === 'cate') {
    // 切换类名
    for (let i = 0; i < cateBox.children.length; i++) {
      cateBox.children[i].classList.remove('active')
    }
    e.target.classList.add('active')

    // 修改 listInfo 内的信息
    const text = e.target.innerText

    // 修改的是 category 信息
    listInfo.category = text === '全部' ? '' : text
    searchName= text === '全部' ? '*' : text
    // 回到第一页
    listInfo.current = 1
    pageNum=0

    // 重新调用 getGoodsList
    getGoodsList()
  }

  // 3-2. 判断点击的是筛选按钮
  if (e.target.className === 'filter_item') {
    // 修改类名
    for (let i = 0; i < filterBox.children.length; i++) {
      filterBox.children[i].classList.remove('active')
    }
    e.target.classList.add('active')

    // 修改 listInfo 内的信息
    listInfo.filter = e.target.dataset.type
    listInfo.current = 1
    pageNum=0
    searchName="*"
    if(listInfo.filter)getGoodsList3();
    // 从新执行 getGoodsList
    else getGoodsList()
  }

//   // 3-3. 判断点击的是折扣按钮
//   if (e.target.className === 'sale_item') {
//     for (let i = 0; i < saleBox.children.length; i++) {
//       saleBox.children[i].classList.remove('active')
//     }
//     e.target.classList.add('active')

//     listInfo.saleType = e.target.dataset.type
//     listInfo.current = 1

//     getGoodsList()
//   }

  // 3-4. 判断点击的是排序按钮
  if (e.target.className === 'sort_item') {
    for (let i = 0; i < sortBox.children.length; i++) {
      sortBox.children[i].classList.remove('active')
    }
    e.target.classList.add('active')

    // listInfo.sortType = e.target.dataset.type
    // listInfo.sortMethod = e.target.dataset.method
    sort=e.target.dataset.method
    getGoodsList2()
  }

//   // 3-5. 判断点击的是下一页按钮
  if (e.target.className === 'right' && e.target.nodeName === 'SPAN') {
    listInfo.current++
    pageNum++
    getGoodsList()
  }

  // 3-6. 判断点击的是上一页按钮
  if (e.target.className === 'left' && e.target.nodeName === 'SPAN') {
    listInfo.current--
    pageNum--
    getGoodsList()
  }

//   // 3-7. 判断点击的是跳转按钮
  if (e.target.className === 'go') {
    // 拿到前一个文本框内的 value
    let page = e.target.previousElementSibling.value - 0
    const total = e.target.previousElementSibling.dataset.total - 0

    // 判断是否是 NaN
    if (!page) page = 1
    if (page < 1) page = 1
    if (page >= total) page = total
    page = parseInt(page)

    // 修改 listInfo 内的信息
    listInfo.current = page
    pageNum = page-1

    getGoodsList()
  }
})

// 一页显示多少条的 select
selectBox.addEventListener('change', () => {
  // 修改 listInfo 内的信息
  listInfo.pagesize = selectBox.value - 0
  listInfo.current = 1
  pageNum=0
  getGoodsList()
})

// // 模糊搜索
searchInp.addEventListener('input', () => {
  // 修改 listInfo 内的信息
  listInfo.search = searchInp.value.trim()
  searchName = searchInp.value.trim()
  listInfo.current = 1
  pageNum=0
  getGoodsList()
})

// // 4. 点击跳转详情页 + 点击加入购物车
// /*
//   分析:
//     + 点击整个 li 都会进行详情页的跳转
//     + 点击 加入购物车 按钮, 会进行加入购物车的操作
//     + 最好是事件委托, 委托给谁 ?
// */
listBox.addEventListener('click', e => {
  // 4-1. 判断点击的是 li 标签, 跳转到详情页
  // 注意: 让 li 内的标签都进行穿透效果
  if (e.target.nodeName === 'LI') {
    // 拿到你点击的这个商品的 id, 把 id 存储在 localStroage 内 或者 sessionStroage 内
    // 你怎么知道你点击的这个 li 的 商品 id 是多少
    // 渲染页面的时候, 把 该商品的 商品id 渲染在 标签身上
    const goodsId = e.target.dataset.id
    window.sessionStorage.setItem('goodsId', goodsId)

    // 跳转到详情页面
    window.location.href = './detail.html'
  }

  // 4-2. 判断点击的是 加入购物车 按钮, 加入购物车操作
  if (e.target.nodeName === 'BUTTON') {
    // 拿到当前商品的商品 id
    const goodsId = e.target.dataset.id
    // 执行加入购物车的操作
    addCart(goodsId)
  }
})

// // 加入购物车的处理函数
// /*
//   分析:
//     + 不能随便加入购物车, 必须登录以后, 才知道向哪里加入
//     + 判断登录过没有
//       => 没有登录过, 直接跳转回到登录页
//     + 如果登录过
//       => 就可以发送请求, 加入购物车
//       => 根据返回值,
//         -> 401, 过期了, 跳转回到登录页
//         -> 1, 加入购物车成功
// */
async function addCart(goodsId) {
  goodsId=1
  // 1. 拿到 localStroage 内的 id 和 token
  const id = window.localStorage.getItem('id')
  const token = window.localStorage.getItem('token')

//   // 2. 验证 id 是否存在
  if (!id) {
    const res = window.confirm('您还没有登录, 请登录后在购买, 点击确定跳转回登录页, 点击取消留在当前页面')
    if (res) {
      window.location.href = './login.html'
      return
    }
    return
  }

  const res = await pAjax({
    url: 'http://localhost:8888/cart/add',
    method: 'POST',
    data: { id, goodsId },
    headers: { authorization: token },
    dataType: 'json'
  })

  if (res.code === 401) {
    const res = window.confirm('您的登录已经过期, 请重新登录后在购买, 点击确定跳转回登录页, 点击取消留在当前页面')
    if (res) {
      window.location.href = './login.html'
      return
    }
    return
  }

  if (res.code === 1) {
    alert('加入购物车成功')
  }
}
